<template>
  <div class="columns">
    <my-header></my-header>
    <ul class="recommend">
      <li>
        <router-link :to="{path:'/classif/tjian'}">为您推荐</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/face'}">面部护理</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/mup'}">底妆彩妆</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/snaks'}">休闲零食</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/nursing'}">身体护理</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/meir'}">美容美发</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/shyp'}">生活用品</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/grhl'}">个人护理</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/bjys'}">保健养生</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/fashion'}">时尚潮品</router-link>
      </li>
      <li>
        <router-link :to="{path:'/classif/baby'}">母婴用品</router-link>
      </li>
    </ul>
    <div class="onone">
      <router-view/>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import MyHeader from '../home/MyHeader/MyHeader.vue'
  import MyFooter from '../home/MyFooter/MyFooter.vue'
  export default {
    data(){
      return{

      }
    },
    components: {
      MyHeader,
      MyFooter
    }
  }
</script>
<style scoped>
  .columns {
    position: relative;
  }
  .onone {
    width: 25rem;
    margin: 0.7rem;
    position: absolute;
    right: 0;
    top: 6rem;
  }
  .recommend li{
    width: 6rem;
    padding: 1rem;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    font-size: 1.5rem;
  }
  .router-link-active {
    color: red;
    /*border-right: 1px solid red;*/
  }
</style>
